<template>
	<view class="mine" v-if="user">
		<view class="user-header">
			<image src="/static/images/jz-background.png" mode="" class="background-img"></image>
			<view class="wine-header">
				<view class="status" ></view>
				<view class="navigation">
					<image src="/static/images/left-icon.png" class="back" @click="back()" mode=""></image>
					<view class="navigation-title">酒资</view>
					
				</view>
				<view class="navigation-position"></view>
				<view class="bind-card">
					<view>绑定银行卡</view>
					<image src="/static/images/right-icon.png"></image>
				</view>
				<view class="user-info">
					<view>余额</view>
					<view>¥ {{user.balance}}</view>
					<view class="balance-list" @click="goMyAccount()">
						<view>查看明细</view>
						<image src="/static/images/right-icon.png"></image>
					</view>
				</view>
				<view class="brokerage">
					<view  class="brokerage-title" @click="goMyBrokerage()">
						<view>待结算佣金</view>
						<image src="/static/images/refresh-icon.png"></image>
					</view>
					<view class="spend">¥ {{user.dividend_brokerage}}</view>
					<view class="widthdraw">查看/提现</view>
				</view>
			</view>
			
		</view>
		<view class="section">
			<view class="section-item">
				<view>今日销售金额</view>
				<view>{{count.day_order_money}}</view>
			</view>
			<view class="section-item">
				<view>今日销售单数</view>
				<view>{{count.day_order_count}}</view>
			</view>
			<view class="section-item">
				<view>今日佣金</view>
				<view>{{count.day_brokerage}}</view>
			</view>
			<view class="section-item">
				<view>本月销售金额</view>
				<view>{{count.month_order_money}}</view>
			</view>
			<view class="section-item">
				<view>本月销售单数</view>
				<view>{{count.month_order_count}}</view>
			</view>
			<view class="section-item">
				<view>本月佣金</view>
				<view>{{count.month_brokerage}}</view>
			</view>
			<view class="section-item">
				<view>上月佣金</view>
				<view>{{count.last_month_brokerage}}</view>
			</view>
			<view class="section-item">
				<view>累计佣金</view>
				<view>{{count.all_brokerage}}</view>
			</view>
		</view>
		<view class="invite-friend">
			<image src="/static/images/invite-friend.png"></image>
		</view>
	</view>
</template>

<script>
	import store from "store"
	import { mapMutations,mapGetters } from 'vuex'
	import Skeleton from "mixins/Skeleton"
	import AuthChecking from "mixins/AuthChecking"
	import SkeletonMineCom from "skeletons/SkeletonMineCom"
	import { getBrokeragesCount } from "api/userBrokeragesCountApi"
	import { getUser } from "api/userApi"
	export default {
		store,
		mixins: [
			Skeleton,
			AuthChecking
		],
		computed:{
			...mapGetters([
				'user',
				'isLogin'
			])
		},
		components: {
			SkeletonMineCom
		},
		data() {
			return {
				count:{},
			}
		},
		methods: {
			...mapMutations(['setUser']),
			goDownLoad(){
				uni.navigateTo({url: `/packs/pages/download/download?from=1`})
			},
			goMyAccount() {
			  uni.navigateTo({url: `/packs/pages/accountDetail/accountDetail`})
			},
			goMyBrokerage() {
			  uni.navigateTo({url: `/packs/pages/user/brokerage`})
			},
			back(){
				uni.navigateBack();
			},
			async getUser(){
				let response =  await getUser()
				this.setUser(response)
			},
			async getBrokeragesCount(){
				let response =  await getBrokeragesCount();
				this.count = response;
				
			},
			
		},
		async onShow() {
			if(await this.isLogin){
				await this.getUser();
				await this.getBrokeragesCount()
				
			}
			uni.setStorage({
				 key:"newsTop",
				 data:0
			})
		},
		onLoad() {
			/* if (window.history && window.history.pushState) {
				history.pushState(null, null, document.URL);
			} */
		}
	}
</script>


<style lang="scss" scoped >
.user-header{
	width: 750rpx;
	background: #FFFFFF;
	border-radius: 20rpx;
	margin:0 auto ;
	postion:relative;
	color:#fff;
	.background-img{
		width:100%;
		height:666rpx;
		
	}
	.wine-header{
		position:absolute;
		top:0;
		left:0;
		width:100%;
	}
	.status {
		width: 100%;
		position: fixed;
		top: 0;
		background: #F6F6F6;
	}
	.navigation{
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		left:0;
		top:0;
		z-index:999;
	}
	.navigation-position{
		width: 100%;
		height: 100rpx;
		background: rgba(0,0,0,0);
	}
	.back{
		display: block;
		width: 18rpx;
		height: 30rpx;
		position: absolute;
		top: 40rpx;
		left:32rpx;
	}
	.navigation-title{
		font-size: 32rpx;
		font-weight: 500;
		color: #fff;
	}
	.bind-card{
		margin-top:22rpx;
		margin-right:28rpx;
		display:flex;
		align-items: center;
		justify-content: flex-end;
		>view{
			font-size:28rpx;
			margin-right:12rpx;
		}
		>image{
			width:16rpx;
			height:22rpx;
			margin-top:4rpx;
		}
	}
	.user-info{
		margin-left:28rpx;
		>view:nth-child(1){
			font-size:40rpx;
			margin-top:8rpx;
			font-weight:600;
		}
		>view:nth-child(2){
			font-size:72rpx;
			margin-top:8rpx;
			font-weight:600;
		}
		.balance-list{
			margin-top:8rpx;
			display:flex;
			align-items: center;
			
			>view{
				font-size:28rpx;
				
			}
			>image{
				width:16rpx;
				height:22rpx;
				margin-top:4rpx;
				margin-left:12rpx;
			}
		}
	}
	.brokerage{
		width:694rpx;
		height:172rpx;
		border-radius: 10rpx;
		margin:50rpx auto 0rpx;
		background:#fff;
		color:#333;
		position:relative;
		
		.brokerage-title{
			padding-top:44rpx;
			font-size:30rpx;
			margin-left:38rpx;
			display:flex;
			>image{
				width:22rpx;
				height:22rpx;
				margin-left:8rpx;
				margin-top:8rpx;
			}
			
		}
		.spend{
			font-size:40rpx;
			font-weight:600;
			margin-left:38rpx;
		}
		.widthdraw{
			width:160rpx;
			height:64rpx;
			border-radius:50rpx;
			background-image: linear-gradient(to right , #F48820 , #F93A2F);
			line-height:64rpx;
			color:#fff;
			font-size:28rpx;
			text-align: center;
			position:absolute;
			top:62rpx;
			right:42rpx;
			 
		}
	}
}
.section{
	width:694rpx;
	height:436rpx;
	margin:0 auto;
	background:#fff;
	border-radius: 10rpx;
	overflow:hidden;
	.section-item{
		text-align: center;
		width:33%;
		margin-top:32rpx;
		margin-bottom:22rpx;
		font-size:28rpx;
		float:left;
		>view:nth-child(2){
			margin-top:12rpx;
			font-size:30rpx;
		}
		
	}
}
.invite-friend{
	width:694rpx;
	height:188rpx;
	margin:18rpx auto 0rpx;
	>image{
		width:694rpx;
		height:188rpx;
		
	}
}
</style>